<!--生成代码确认弹窗-->
<template>
  <div>
    <el-dialog v-bind="$attrs" width="1200px" :close-on-press-escape="false" v-on="$listeners">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="150px">
        <el-form-item label=" ">
          <div style="display:flex;align-items:center;">
            <el-tag type="danger">以下选项，对应生成页面代码时所显示字段，如右图所示（点击图片看大图）：</el-tag>
            <el-image :src="showImg" style="width:60px;height:60px;margin-left:10px;" fit="cover"
                      :preview-src-list="[showImg]"/>
          </div>
        </el-form-item>
        <el-form-item label="①查询条件字段" prop="searchFields">
          <el-checkbox-group v-model="formData.searchFields">
            <el-checkbox v-for="(item, index) in fieldNameList" :key="index" :label="item">{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="②el-table显示字段" prop="listFields">
          <el-checkbox-group v-model="formData.listFields">
            <el-checkbox v-for="(item, index) in fieldNameList" :key="index" :label="item">{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="③导入模板字段" prop="importFields">
          <el-checkbox-group v-model="formData.importFields">
            <el-checkbox v-for="(item, index) in fieldNameList" :key="index" :label="item">{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="④导出模板字段" prop="exportFields">
          <el-checkbox-group v-model="formData.exportFields">
            <el-checkbox v-for="(item, index) in fieldNameList" :key="index" :label="item">{{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {clearFieldsListSetting, getFieldsListSetting, saveFieldsListSetting} from "@/utils/db";

export default {
  inheritAttrs: false,
  props: ['fieldList'],
  data() {
    return {
      formData: {
        searchFields: [],// 列表页[查询字段]
        listFields: [],// 列表页[表格显示字段]
        importFields: [],// 导入模板[导入字段]
        exportFields: []// 导出模板[导出字段]
      },
      rules: {
        searchFields: [{required: true, message: '请选择查询字段', trigger: 'change'}],
        listFields: [{required: true, message: '请选择表格显示字段', trigger: 'change'}],
        importFields: [{required: true, message: '请选择导入模板字段', trigger: 'change'}],
        exportFields: [{required: true, message: '请选择导出模板字段', trigger: 'change'}]
      },
      fieldNameList: [],
      showImg: require('@/assets/images/list-fields.png')
    }
  },
  computed: {},
  mounted() {
    this.fieldNameList = this.fieldList.map(item => item.__vModel__)
    if (this.fieldList && this.fieldList.length > 0) {
      if (getFieldsListSetting()) {
        this.formData = getFieldsListSetting()
      } else {
        // 初始化各个字段的默认值（默认：去掉主键字段、去掉create_time和update_time字段）
        this.formData.searchFields = this.fieldList
            .filter(item => !item.__config__.isKey && item.__vModel__ !== 'create_time' && item.__vModel__ !== 'update_time')
            .map(item => item.__vModel__)
        this.formData.listFields = [...this.formData.searchFields]
        this.formData.importFields = [...this.formData.searchFields]
        this.formData.exportFields = [...this.formData.searchFields]
      }
    } else {
      // 清空本地存储的字段列表设置
      clearFieldsListSetting()
    }
  },
  watch: {
    formData: {
      handler(val) {
        if (val) {
          saveFieldsListSetting(val)
        }
      },
      deep: true
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs.elForm.validate(valid => {
        if (!valid) return
        saveFieldsListSetting(this.formData)
        this.$emit('confirm', {...this.formData})
        this.close()
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
